<template>
  <van-popup v-model:show="model.visible" :style="{ padding: '12px' }">
    <p>选择替换的英雄</p>
    <van-grid :column-num="3">
      <van-grid-item v-for="(item,index) in model.英雄队列" :class="index===model.选中索引?'selected':''" @click="model.选中索引=index">
        <van-image
            :src="item"
        />
      </van-grid-item>
    </van-grid>
    <div>
      <van-button @click="选中确定">确定</van-button>
    </div>
  </van-popup>
</template>

<script setup>

import {reactive,getCurrentInstance} from "vue";

const {proxy} = getCurrentInstance();

const model = reactive({
  visible: false,
  选中索引: 0,
  英雄队列: [],
})

const open = (英雄队列) => {
  model.英雄队列 = 英雄队列;
  model.visible = true;
}
const 选中确定 = () => {
  proxy.$emit('onSelected',model.选中索引)
  model.visible = false;
}
const 抽牌 = () => {
  model.手牌.push(model.中央牌堆.pop())
}
defineExpose({open})
</script>

<style scoped>
.selected{
  border: 1px solid green
}

</style>
